<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #app{
            width: 40%;
        }
        .textBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .textBox button{
            background-color: pink;
            border:none;
            width: 60px;
            height: 30px;
            border-radius: 3px;
        }

        .commentBox{
            margin: 0 auto;
            width: 80%;
            margin-top: 20px;
        }
        
        .comentItem{
            display: flex;
            align-items: center;
            gap: 0.5em;
            position: relative;
        }

        .userMeta{
            width: 30px;
            height: 30px;
            background-color: rgb(70, 189, 219);
            border-radius: 50%;
        }

        .time{
            position: absolute;
            right: 0;
        }

        .textitem{
            margin-left: 40px;
        }

        .buttonBox{
            margin-left: 40px;
            border: none;
        }

        .buttonBox button{
            border:none;
            width: 50px;
            height: 30px;
            border-radius: 3px;
        }

        .buttonBox button span{
            color: red;
        }
        .commentValue{
            resize: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="textBox">
            <input type="text" class="username" v-model="username" placeholder="用户名">
            <textarea cols="40" class="commentValue" v-model="commentValue" placeholder="输入评论"></textarea>
            <button @click="submit()">发布</button>
        </div>

        <div class="commentBox" v-for="(item,index) in Lists">
            <!-- 用户信息 -->
            <div class="comentItem">
                <div class="userMeta"></div>
                <div class="name">{{item.username}}</div>
                <div class="time">{{item.timeStamp}}</div>
            </div>

            <!-- 内容 -->
            <div class="textitem">
                <p>{{item.commentValue}}</p>
            </div>

            <div class="buttonBox">
                <button @click="item.links++">点赞<span>{{item.links}}</span></button>
                <button @click="stick(item,index)">置顶</button>
                <button @click="delectButton(index)">删除</button>
            </div>
        </div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                username: "",   
                commentValue: "",
                Lists:[],   // 定义一个数组来装数据
            },
            methods:{
                // 发布按钮
                submit(){
                    // 判断输入框的值处理前后的空格，不能输入
                    if(!this.username.trim() && !this.commentValue.trim()) return;

                    this.Lists.push({
                        id: +new Date(), // 时间戳
                        username: this.username,    // 用户
                        commentValue: this.commentValue,    // 文本域
                        links: 0,   // 点赞
                        timeStamp: new Date().toLocaleDateString()  // 获取时间戳的日期
                    })

                    this.username = ""  //  点击push后字符清空
                    this.commentValue = ""
                },
                // 置顶
                stick(item,index){
                    this.Lists.splice(index,1); // 删除下标
                    this.Lists.unshift(item);   // 前置数组添加
                },
                // 删除
                delectButton(index){
                    this.Lists.splice(index,1); // 删除
                }
    

            }


        });
    </script>
</body>
</html>